<template>
  <div class="FAQ">
    <h1 class="font-m f36">{{ title }}</h1>
    <p class="f20 font-m">{{ tips }}</p>
    <div class="FAQ_inner">
      <div class="FAQ_item" v-for="(i, index) in dataList" :key="index">
        <div class="problem flex" @click="itemClick(i.id)">
          <div class="box">
            <img src="/images/problem.png" />
            <p class="font-r f16">{{ i.title }}</p>
          </div>
          <img
            :src="
              isAct && actId == i.id
                ? '/cn/images/recover.png'
                : '/cn/images/expand.png'
            "
          />
        </div>
        <div :class="`answer ${isAct && actId == i.id ? 'answer_active' : ''}`">
          <img src="/images/answer.png" />
          <p class="font-r f16" v-html="i.content"></p>
        </div>
      </div>
    </div>

    <!-- Pagination -->
    <Pagination :total="total" :count="3" @change="pageChange" />
  </div>
</template>
<script>
import {
  getCloumnList,
  getArticleLists,
  getCategoryList,
} from "@/api/sections";
export default {
  data() {
    return {
      total: 0,
      page: 1,
      actId: 0,
      title: "",
      tips: "",
      isAct: false,
      dataList: [],
    };
  },
  mounted() {
    this.initData();

    getCategoryList({ cid: 1444 }).then((res) => {
      this.title = res.data.name;
    });

    getCategoryList({ cid: 1466 }).then((res) => {
      this.tips = res.data.name;
    });
  },
  methods: {
    itemClick(id) {
      this.actId = id;
      this.isAct = !this.isAct;
    },
    pageChange(e) {
      this.page = e;
      this.getData();
    },
    initData() {
      this.dataList = [];
      this.getData();
    },
    getData() {
      let post = {
        cid: 1466,
        ext: "content,text1,link1",
        mid: 17,
        page: this.page,
        limit: 10,
      };
      getArticleLists(post).then((res) => {
        console.log(res, 1111);
        this.dataList = res.data.data;
        this.total = res.data.total;
      });
    },
  },
};
</script>
